<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head>
        <title>Closest Positioned Ancestor</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
        <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
    </head>

    <body>
        <h1>Closest Positioned Ancestor</h1>

        <div class="static_cls div_1">
            <code>div</code> #1: Non-positioned
            <div class="absolute_cls sized_cls bottom_right_cls box1">
                Absolute; descendent of div#1 <br /><br /><br />No positioned ancestor.
                <em class="absolute_cls offset_cls box2">Nested Absolute</em>
            </div>

            <div class="relative_cls div_2">
                inner <code>div</code> #2: Positioned (<code>position:relative;</code>)
                <div class="static_cls div_3">
                    inner <code>div</code> #3: Non-positioned (<code>position:static;</code>)
                    <span class="absolute_cls sized_cls bottom_right_cls box1">
                        Absolute #2 Bottom Right<br /><br /><br />Positioned to div#2
                        <em class="absolute_cls offset_cls box2">Nested Absolute</em>
                    </span>
                </div>
            </div>
        </div>
    </body>

</html>
